<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>19、Vue对数组的操作大全.html</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse
        }

        table tr td {
            border: 1px solid #ccc;
            padding: 10px;
        }

        .container {
            background: #eee;
            padding: 20px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>


<div id="app">
    <div class="container">
        <p>商品注解: <input type="text" v-model="product.id"></p>
        <p>商品标题: <input type="text" v-model="product.title"></p>
        <p>商品价格: <input type="text" v-model="product.price"></p>
        <p>商品数量: <input type="text" v-model="product.num"></p>
        <p>
            <button @click="pushProduct">push添加商品</button> &nbsp;&nbsp;&nbsp;
            <button @click="unshiftProduct">unshift添加商品</button>&nbsp;&nbsp;&nbsp;
            <button @click="popProduct">pop弹出最后一个元素</button>&nbsp;&nbsp;&nbsp;
            <button @click="shiftProduct">shift弹出第一个元素</button>&nbsp;&nbsp;&nbsp;
            <button @click="reverseProduct">反转数组</button>
        </p>
    </div>
    <table>
        <thead>
        <tr>
            <td><input type="checkbox"></td>
            <td>ID</td>
            <td>产品名称</td>
            <td @click="sortMain('sortPrice','price')">产品价格 {{sortPrice ? "升序" : "降序"}}</td>
            <td @click="sortMain('sortNum','num')">产品的数量</td>
            <td>操作</td>
            <td>index</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(product,index) in products" :key="product.id">
            <td><input type="checkbox"></td>
            <td>{{product.id}}</td>
            <td>{{product.title}}</td>
            <td>{{product.price}}</td>
            <td>{{product.num}}</td>
            <td><a href="javascript:void(0);">编辑</a> <a href="javascript:void(0);"
                                                        @click="delProductByIndex(index)">删除</a></td>
            <td>{{index}}</td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td colspan="10">
                <a href="javascript:void(0);" @click.prevent="concatProduct">拼接加载更多</a>
                &nbsp;&nbsp;&nbsp;
                <a href="javascript:void(0);" @click.prevent="loadMore">覆盖加载更多</a>
            </td>
        </tr>
        </tfoot>
    </table>
</div>

<script src="js/vue.global.js"></script>
<script>
    var vm = Vue.createApp({
        data() {
            return {
                sortPrice: false,
                sortNum: false,
                product: {id: 0, title: "", price: 0, num: 1},
                products: [
                    {id: 1, title: "小米11", price: 125.8, num: 12},
                    {id: 2, title: "小米12", price: 25.8, num: 2},
                    {id: 3, title: "小米13", price: 15.8, num: 1},
                    {id: 4, title: "小米14", price: 5.8, num: 11},
                    {id: 5, title: "小米15", price: 15.8, num: 58}
                ]
            }
        },
        methods: {
            // 删除元素
            delProductByIndex(index) {
                this.products.splice(index, 1);
            },

            // push添加商品
            pushProduct() {
                this.products.push(this.product);
            },

            // unshift添加商品
            unshiftProduct() {
                this.products.unshift(this.product);
            },

            // 拼接数组
            concatProduct() {
                // 这里是从数据库中查询出来的商品的第二页的数组
                var secondProducts = [
                    {id: 6, title: "小米16", price: 125.8, num: 12},
                    {id: 7, title: "小米17", price: 25.8, num: 2},
                    {id: 8, title: "小米18", price: 15.8, num: 1},
                    {id: 9, title: "小米20", price: 5.8, num: 11},
                    {id: 10, title: "小米21", price: 15.8, num: 58}
                ];

                secondProducts = secondProducts.filter(function (obj) {
                    return obj.price > 20;
                })

                // 这里是追加
                var newArr = this.products.concat(secondProducts);
                this.products = newArr;
            },

            // 排序
            sortProductPrice() {
                this.sortPrice = !this.sortPrice;
                var newArr = this.products.sort((a, b) => this.sortPrice ? a.price - b.price : b.price - a.price)
                this.products = newArr;
            },

            sortMain(flag, filed) {
                this[flag] = !this[flag];
                this["products"] = this["products"]["sort"]((a, b) => this[flag] ? a[filed] - b[filed] : b[filed] - a[filed])
            },

            loadMore() {
                // 这里是从数据库中查询出来的商品的第二页的数组
                var secondProducts = [
                    {id: 6, title: "小米16", price: 125.8, num: 12},
                    {id: 7, title: "小米17", price: 25.8, num: 2},
                    {id: 8, title: "小米18", price: 15.8, num: 1},
                    {id: 9, title: "小米20", price: 5.8, num: 11},
                    {id: 10, title: "小米21", price: 15.8, num: 58}
                ];

                // 这里是追加
                this.products = secondProducts;
            },

            // pop弹出最后一个元素并返回
            popProduct() {
                this.product = this.products.pop();
            },

            //  shift弹出第一个元素并返回
            shiftProduct() {
                this.product = this.products.shift();
            },

            // 数组反转
            reverseProduct() {
                this.products.reverse();
            },
        }
    }).mount("#app");
</script>
</body>
</html>